<template>
	<view class="page">
		<u-navbar leftIconSize='30rpx' @leftClick="$utils.back()" :placeholder="true" bgColor="#f5f5f5">
			<view slot='center' class="navTitle">
				<text :class='{choose:type=="order"}' @click="type='order'">订单</text>
				<text :class='{choose:type=="recharge"}' @click="type='recharge'">充值</text>
			</view>
		</u-navbar>
		<view style="flex: 1;">
			<order v-if="type=='order'" :propId='id' />
			<recharge v-else />
		</view>

	</view>
</template>

<script>
	import order from './components/order.vue'
	import recharge from './components/recharge.vue'
	export default {
		components: {
			order,recharge
		},
		data() {
			return {
				type: 'order',
				id: 0
			}
		},
		onLoad(op) {
			this.id = ~~op.id
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
	}

	.navTitle {
		font-size: 26rpx;
		font-weight: 600;

		>text {
			margin: 0 10rpx;
		}
	}

	.choose {
		font-size: 28rpx;
		color: #3975c6
	}
</style>